<script setup>
import { reactive, computed, ref, onMounted, unref, watch } from 'vue'
import { queryObListByInsuredInfo, queryVisitorName } from '@/api/home'
import { useAccountStore } from '@/stores/account'
import { message } from 'ant-design-vue'
import { useRoute } from 'vue-router'
import { formatColumn } from '@/utils/tools.js'
import cloneDeep from 'lodash/cloneDeep'
const route = useRoute()
const accountStore = useAccountStore()
const isEyeOpen = computed(() => {
  return accountStore.DESENSITIZATION
})
const formData = ref({
  memberId: route.query.memberId,
  claimNo: route.query.claimNo,
  customerId: route.query.customerId,
  insuredName: []
})
let searchFormData = ref(cloneDeep(formData.value))
async function initData() {
  getInsuredList()
}
onMounted(async () => {
  if (route.query.customerId) {
    initData()
  }
})
// 脱敏
watch(
  () => isEyeOpen.value,
  (newValue, oldValue) => {
    getTableList()
  }
)
function handlePageChange(page, pageSize) {
  pagination.current = page
  pagination.pageSize = pageSize
  getTableList()
}
const pagination = reactive({
  class: 'ant-pagination-common-ui',
  current: 1,
  pageSize: 10,
  size: 'large',
  showSizeChanger: true,
  hideOnSinglePage: true,
  total: 0,
  onChange: handlePageChange
})
const dynamicColumns = computed(() => {
  return [
    {
      title: '承保商',
      dataIndex: 'underwriterName',
      key: 'underwriterName',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: '会员ID',
      dataIndex: 'memberId',
      key: 'memberId',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: '就诊人姓名',
      dataIndex: 'membersName',
      key: 'membersName',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: 'OB跟进客服',
      dataIndex: 'obAssignee',
      key: 'obAssignee',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: '理赔号',
      dataIndex: 'claimNumber',
      key: 'claimNumber',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: '就诊日期',
      dataIndex: 'serviceDate',
      key: 'serviceDate',
      width: 200,
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: '原始OB金额',
      dataIndex: 'originalObAmountCny',
      key: 'originalObAmountCny',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: '已回收OB金额',
      dataIndex: 'recycledObAmountCny',
      key: 'recycledObAmountCny',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: '剩余OB金额',
      dataIndex: 'restObAmountCny',
      key: 'restObAmountCny',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: '最新OB邮件发送日期',
      dataIndex: 'obMailSendDate',
      key: 'obMailSendDate',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: '最新备注内容',
      dataIndex: 'remarkContent',
      key: 'remarkContent'
      // customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: '公司简称',
      dataIndex: 'companyShortName',
      key: 'companyShortName',
      customRender: ({ text, record, index }) => formatColumn(text)
    }
  ]
})
const loading = ref(false)
let dataSource = ref([])
const sumRestOBAmountCNY = ref(null)
async function getTableList() {
  loading.value = true
  console.log(unref(searchFormData).insuredName, 'searchFormData')
  const data = {
    current: pagination.current,
    size: pagination.pageSize,
    desensitization: unref(isEyeOpen) ? '02' : '01',
    ...searchFormData.value,
    insuredName: unref(searchFormData).insuredName?.join(',')
  }
  let res = null
  try {
    res = await queryObListByInsuredInfo(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    loading.value = false
  }
  if (res?.isSuccess) {
    sumRestOBAmountCNY.value = res.data.sumRestOBAmountCNY
    dataSource.value = res.data.pageObList.records
    pagination.total = Number(res.data.pageObList.total)
  }
}
function openObLink(record) {
  if (record.checkClaimsInputUrl) {
    window.open(record.checkClaimsInputUrl)
  }
}
//重置
function reset() {
  formData.value = {}
  insuredList.value = []
}
// 就诊人姓名
let insuredList = ref([])
async function getInsuredList() {
  const { customerId, memberId } = formData.value
  let res = null
  try {
    const data = {
      memberId,
      customerId
    }
    res = await queryVisitorName(data)
  } catch (err) {
    console.log('err', err)
  }
  if (res?.isSuccess) {
    insuredList.value = res.data.map((v) => ({ name: v }))
    if (customerId) {
      const defaultName = res.data[0] || ''
      formData.value.insuredName = [defaultName]
    }
  }
}
// 会员ID change
async function handleChangeMemberId(e) {
  formData.value.insuredName = []
  formData.value.customerId = ''
  insuredList.value = []
  if (e.target.value) {
    getInsuredList()
  }
}
//查询
async function handleSearch() {
  const { memberId, claimNo } = unref(formData.value)
  if (!memberId && !formData.value.insuredName.length >= 1 && !claimNo) {
    return message.warning('请至少输入一个查询条件')
  }
  pagination.current = 1
  searchFormData.value = cloneDeep(formData.value)
  getTableList()
}
function handlePatientChange(value) {
  formData.value.customerId = ''
  if (Array.isArray(value)) {
    if (value.length > 1) {
      formData.value.insuredName = [value[value.length - 1]]
    } else {
      formData.value.insuredName = value
    }
  } else {
    formData.value.insuredName = [value]
  }
}
</script>
<template>
  <div class="more-ob ant-page-common-ui">
    <div class="search-box ant-page-search-ui">
      <a-row :gutter="[20, 20]">
        <a-col class="gutter-row" :span="6">
          <p class="title">会员ID</p>
          <a-input
            :bordered="false"
            v-model:value="formData.memberId"
            placeholder="请输入"
            allow-clear
            @change="handleChangeMemberId"
          />
        </a-col>
        <a-col class="gutter-row" :span="6">
          <p class="title">就诊人姓名</p>
          <a-select
            v-model:value="formData.insuredName"
            optionFilterProp="name"
            style="width: 100%"
            :field-names="{ label: 'name', value: 'name' }"
            :options="insuredList"
            :showArrow="true"
            placeholder="请选择或输入"
            :bordered="false"
            mode="tags"
            @change="handlePatientChange"
          />
        </a-col>
        <a-col class="gutter-row" :span="6">
          <p class="title">理赔号</p>
          <a-input
            :bordered="false"
            v-model:value="formData.claimNo"
            placeholder="请输入"
            allow-clear
          />
        </a-col>
        <a-col class="gutter-search" :span="6">
          <a-button type="primary" class="search-btn" :loading="loading" @click="handleSearch"
            >查询</a-button
          >
          <a-button @click="reset">重置</a-button>
        </a-col>
      </a-row>
    </div>
    <div class="ob-table">
      <div class="ob-title">
        <span>剩余OB金额汇总：</span>
        <span class="ob-title-red">CNY {{ sumRestOBAmountCNY }}</span>
      </div>
      <a-table
        :pagination="pagination"
        class="ant-table-striped"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        size="middle"
        :dataSource="dataSource"
        :columns="dynamicColumns"
        :loading="loading"
        tableLayout="fixed"
        :bordered="false"
        :scroll="{ x: '1920px' }"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'claimNumber'">
            <span class="text-decortion" @click="openObLink(record)">{{ formatColumn(text) }}</span>
          </template>
          <template v-if="column.key === 'restOBAmountCNY'">
            <span class="rest-ob-amountcny">{{ formatColumn(text) }}</span>
          </template>
          <template v-if="column.key === 'remarkContent'">
            <a-tooltip :title="text">
              <div>{{ formatColumn(text) }}</div>
            </a-tooltip>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<style lang="scss">
.more-ob {
  padding: 30px 40px;
  background: linear-gradient(180deg, #e2edf9 0%, #ffffff 15%, #ffffff 83%, #f5f9fc 100%);
  .gutter-row {
    .title {
      font-weight: bold;
      font-size: 15px;
      color: #333333;
      margin-bottom: 16px;
    }
  }
  .gutter-search {
    display: flex;
    align-items: end;
    .search-btn {
      margin-right: 16px;
    }
  }
  .search-box {
    padding-bottom: 50px;
  }
  // 表格的样式开始
  .ob-table {
    .ob-title {
      margin-bottom: 30px;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      .ob-title-red {
        color: #cf595d;
        margin-left: 6px;
      }
    }
  }
  .text-decortion {
    font-weight: 400;
    font-size: 14px;
    color: #4d789c;
    text-decoration: underline;
    cursor: pointer;
  }
}
</style>
